<template>
  <div class="majorPage">

    <view class="my_content">
      
      <view   class="my_yiyle">
        <uv-image  src="https://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png@1280w_1l_2o_100sh.png" width="115rpx" height="115rpx" shape="circle"></uv-image>
        <view>
        <view class="click">{{userInfo.welderName}}（工号： {{userInfo.welderNo}}）</view>
        <view style="font-size: 20rpx;width: 68%;color: #666;" class="click2">项目名称：陕西龙华集团煤业科技发展有限公司煤炭分级分质清洁高效综合利用项目</view>

      </view>
      </view>


  <view @click="openPicker" class="select_ab">

    <span>{{initName}}</span>
    <uv-icon size="10" name="arrow-right"></uv-icon>
  </view>
      
 
    </view>

    <view style="position: relative;" class="content">
      <view style="position: absolute;top: 0;left: 0;display: flex;align-items: center;padding: 20rpx;font-size: 23rpx;font-weight: bolder;width: 180rpx;background-color: white;z-index: 999;">
      <image
      style="width: 25rpx;height: 25rpx"
        src="/static/zx.png"
        mode="scaleToFill"
      /> &nbsp; 项目主项
      </view>
		<uv-vtabs 
    :height="tabHeihgt"
    :barScrollable="list.length>10?true:false"
    barWidth="180rpx"
			 :chain="false"
			:list="list"
			:barItemBadgeStyle="{right:'20px',top:'12px'}"
			@change="change">
			<uv-vtabs-item>
        <view class="content_vtabs">
          <uv-sticky>
            <view class="input_inside">
              <view class="input">
            <uv-input
            v-model="search"
		    placeholder="请输入管线号"
		    prefixIcon="search"
        shape="circle"
        :customStyle="{fontSize: '20rpx', paddingTop: '0px',paddingBottom: '0px'}"
        :placeholderStyle="{fontSize: '20rpx', paddingTop: '0px',paddingBottom: '0px'}"
		    prefixIconStyle="font-size: 22rpx;color: #909399"
		></uv-input>
  </view>
  <!-- <uv-icon @click="scanClick" name="scan" size="23"></uv-icon> -->
  </view>
       </uv-sticky>
 
       <view @click.stop="gotoDetail(item)" v-for="(item,index) in pipeLineData" :key="index" class="gx_list">

        <view class="item">
         
          <image v-if="index % 4 == 0" style="width: 28rpx;height: 28rpx;"  widthFix="20rpx" height="20rpx" src="../static/g0.png"></image>
          <image v-if="index % 4 == 1" style="width: 28rpx;height: 28rpx;"  widthFix="20rpx" height="20rpx" src="../static/g1.png"></image>
          <image v-if="index % 4 == 2" style="width: 28rpx;height: 28rpx;"  widthFix="20rpx" height="20rpx" src="../static/g2.png"></image>
          <image v-if="index % 4 == 3" style="width: 28rpx;height: 28rpx;"  widthFix="20rpx" height="20rpx" src="../static/g3.png"></image>
          <image v-if="index % 4 == 4" style="width: 28rpx;height: 28rpx;"  widthFix="20rpx" height="20rpx" src="../static/g4.png"></image>
          <span class="font_gx">管线号：{{ item.pipeLine }}</span>

           <view @click.stop="checkFile(item.file)" class="posi_text">查看文件</view>
        </view>
       </view>
       
      
        </view>
			
     
			</uv-vtabs-item>
		</uv-vtabs>
	</view>

  <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
  
  <uv-popup ref="popup" mode="bottom" >
			<view class="file_lefts" style="width: 100%">
        <view class="list_header_view">ISO图文件浏览</view>
        <uv-list v-if='itemFileData.length>0'>
	<uv-list-item 
  :clickable="true"
  @click="viewFile(item)"
  v-for="(item,index) in itemFileData" :key="index"
		:title="item.fileName" 
		note="PDF文件，点击预览" 
		thumb="https://ts1.cn.mm.bing.net/th/id/R-C.1477a466f67a6c8b1a6d640306188077?rik=mBDZbx2a7m9eQg&riu=http%3a%2f%2fbpic.588ku.com%2felement_origin_min_pic%2f00%2f29%2f05%2f6356d2205a574ea.jpg!rw400&ehk=Nt2P9hbW8JvXtX%2brW7ThLWzpORvCQ7KG0mznAulrpxI%3d&risl=&pid=ImgRaw&r=0" 
		thumb-size="lg" 
		:rightText="`${(index+ 32)*2}kb`">
	</uv-list-item>
	
</uv-list>

<view style="color:#ccc;font-size: 22rpx;font-weight: bolder;display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-else>
  暂无可预览文件
</view>
			</view>
		</uv-popup>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import {getName,pipeLine,getWeldByQrcode} from '../https/api/majorPage'
import { onPageScroll, onShow } from "@dcloudio/uni-app";

let popup = ref(null)

let itemFileData = ref([])
let checkFile = (data) => {
  popup.value.open()
  itemFileData.value = data
}


let gotoDetail = (item) => {
  uni.setStorageSync('createDetail',JSON.stringify(item))
  uni.navigateTo({
    url: '/pages/craterPage'
  })
 
}

let viewFile = (item) => {
  console.log(12313)
  uni.showLoading({
    title:'加载文件中..'
  })
  uni.downloadFile({
    url: item.url,
    success: function (res) {
      var filePath = res.tempFilePath;
   console.log(res)
      uni.openDocument({
        fileType: 'pdf',
        filePath: filePath,
        showMenu: true,
        success: function (res) {
          console.log("打开文档成功");
        },
        complete:(res)=>{
          console.log(res)
        }
      });
      uni.hideLoading()
    },
  });

}


let scanClick = () => {
  uni.scanCode({
	success:  async(res)=> {
		console.log('条码类型：' + res.scanType);
		console.log('条码内容：' + res.result);
    if(res.scanType == 'QR_CODE'){
      
    }
	}
});
}

let picker = ref(null)

let initName = ref('待完成项目')
let search = ref('')
let change = (e) => {
  majorCode.value = list.value[e].id
 getListNameDetail({
      "search": search.value, 
 
      "majorCode": majorCode.value
    })
}

watch(search,()=>{
  getListNameDetail({
      "search": search.value, 
 
      "majorCode":majorCode.value
    })
})

let confirm = (e) => {
  console.log(e)
  initName.value = e.value[0]
}

let columns = ref([[
  '待完成项目','已完成项目'
]])
let openPicker = () => {
  picker.value.open();
}

let majorCode = ref('')
let getListName = async(data) => {
  let res =await getName(data)
  if(res.code == 200){
    list.value = res.data
    majorCode.value = res.data[0].id
    getListNameDetail({
      "search": search.value, 
 
      "majorCode": majorCode.value
    })
  }
}

let pipeLineData = ref([])
let getListNameDetail = async(data) => {
  let res= await pipeLine(data)
  pipeLineData.value = res.data
}
let tabHeihgt = ref(0)
let userInfo = ref({})
onShow(()=>{
  console.log(uni.getStorageSync('useInfo'))
  userInfo.value = JSON.parse(uni.getStorageSync('useInfo'))
  
  wx.createSelectorQuery().select('.my_content').boundingClientRect(rect=>{
  
  tabHeihgt.value = wx.getWindowInfo().windowHeight - rect.height - 20

}).exec();
getListName({})
})



let list = ref([{
		name: 'uv-ui简介',
	
	}
  ,
  {
		name: 'uv-ui简介',
	
	},
  {
		name: 'uv-ui简介',
	
	},
  {
		name: 'uv-ui简介',
	
	},
  {
		name: 'uv-ui简介',
	
	},
  {
		name: 'uv-ui简介',
	
	},
  {
		name: 'uv-ui简介',
	
	},
  {
		name: 'uv-ui简介',
	
	},
  {
		name: 'uv-ui简介',
	
	},
  {
		name: 'uv-ui简介',
	
	},


]) 

</script>

<style lang="scss" scoped>
.list_header_view{
  padding: 20rpx;
  padding-bottom: 0;
  font-size: 27rpx;
  font-weight: bolder;
}
.file_lefts{
 
}
.gx_list{
  box-shadow:  0upx 0upx 10upx #ddd;;
  .item{
    .font_gx{
      font-size: 24rpx;
    }
    position: relative;
    padding: 20rpx 10rpx;
    
  display: flex;
  align-items: center;
  .posi_text{
    position: absolute;
    right: 10rpx;
    top: 50%;
    color: #3c9cff;
    transform: translateY(-50%);
    font-size: 22rpx;
  }
  label{
    margin-left: 20rpx;
  }
  }
margin-top: 20rpx;
}
.input_inside{
  .input{
    width: 95%;
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  position: relative;
  z-index: 999;
}
.content_vtabs{

  padding: 20rpx;
}
.select_ab{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  color: #4C4C4C;
  position: absolute;
  right: 20rpx;
  top: 60rpx;
}

.my_content{
  position: relative;
  padding: 20rpx;
  background-image: linear-gradient(180deg, #9acafc, #fff);
  .click{
    font-size: 28rpx;
    font-weight: bold;
    margin-left: 20rpx;
  }
  .click2{
    font-size: 22rpx;
    margin-left: 20rpx;
    margin-top: 10rpx;
  }
 .my_yiyle{
  align-items: center;
  display: flex;
  
 }
}


.list_goods{
  padding: 20rpx;
	.prive_title{
		margin-top: 8rpx;
		padding: 0 15rpx;
	}
	.shopmall{
    margin-top: 10rpx;
		display: flex;
  color: #8D8D8D;
  font-size: 22rpx;
  margin-bottom: 20rpx;
  padding: 0 15rpx;
	}
	.margin_top_bottom{
		padding: 0 15rpx;
		margin-bottom: 8rpx;
		margin-top: 6rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.box1{
			margin-right: 20rpx;
			border: 1px solid #FF1C23;
			width: 85rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #DF0024;
			font-size: 18rpx;
		}
.box2{
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}
	  .quan{
		padding: 1rpx;
		border: 1px solid #FF1C23;
		border-right: 1px dashed #FF1C23;
		color: #DF0024;
		font-size: 18rpx;
	  }
	  .quan2{
		padding: 1rpx;
		border: 1px solid #FF1C23;
		border-left: none;
		color: #DF0024;
		font-size: 18rpx;
	  }

	

	}
	.price_red{
		color: #FF1C23;
		font-size: 31rpx;
	}
	.price_scale{
		margin-left: 20rpx;
		color:#8D8D8D;
		font-size:22rpx;
	}
	margin-top: 70rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	.item{
		margin-bottom: 20rpx;
		width: 49%;
     border-radius: 15rpx;
	 background: white;
	 .item_title{
		font-size: 25rpx;
		padding: 0 15rpx;
		margin-top: 15rpx;
		
		align-items: center;
	}
	.span_p{
		overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;  // 控制多行的行数
    -webkit-box-orient: vertical;


	}
	.nianhuo{
		display: inline-block;;
		border-radius: 10rpx;
		vertical-align: top;
		font-size: 20rpx;
		background-image: linear-gradient(135deg, rgb(246, 175, 175), red);
		width: 54rpx;
		height: 28rpx;
		text-align: center;
		color: white;
		font-weight: bolder;
		line-height: 28rpx;
       display: inline-block;
	}
	}
	
}

.majorPage{
  height: 100vh;
}

.nopadding{
  padding: 0!important;
}
.sa2{
  padding-bottom: 30rpx;
  flex-wrap: wrap;
}
.wi{
  display: flex;
  align-items: center;
  justify-content: center;
 margin-top: 30rpx;
  width: 25%;
}
.box_list{
  margin-top: 30rpx;
  margin-bottom: 20rpx;
  .item{
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #333333FF;
    font-size: 22rpx;
    .text{
      margin-top: 10rpx;
    }
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my_text_right_lef{
  margin-right: 5rpx;
}
.list_title{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my_list{
  margin-bottom: 30rpx;
  border-radius: 30rpx;
  background: white;
  padding: 20rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  .list_right{
    color: #4C4C4CFF;
    display: flex;
    align-items: center;
    font-size: 22rpx;
  }
  .list_left{
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: bold;
    .my_text{
      margin-left: 10rpx;
    }

  }
}
.my_message{
  margin: 40rpx 0;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item{
    display: flex;
    color: #4C4C4C;
    font-size: 22rpx;
    flex-direction: column;
    align-items: center;
    .tezxt{
      margin-top: 10rpx;
    }
  }
}
.my{
  min-height: 100vh;
  background: #F8F8F8;

}
.my_content{
  padding: 20rpx;
  background-image: linear-gradient(180deg, #9acafc, #fff);
  .click{
    font-size: 28rpx;
    font-weight: bold;
    margin-left: 20rpx;
  }
  .click2{
    font-size: 22rpx;
    margin-left: 20rpx;
    margin-top: 10rpx;
  }
 .my_yiyle{
  align-items: center;
  display: flex;
  
 }
}

</style>